html body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.container{
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ebecf0;
  .first-line{
    display: flex;
    justify-content: center;
    align-items: center;
    .Aa{
      width: 240px;
      height: 240px;
      display: flex;
      margin-right: 80px;
      flex-direction: column;
      justify-content: center;
      border-radius: 40px;
      background: #ebecf0;
      box-shadow:  24px 24px 48px #b3b3b6, 
                  -24px -24px 48px #ffffff;
      .text{
        text-align: center;
        font-size: 144px;
        background-image:-webkit-linear-gradient(right,#31BFE4,#1858F1); 
        -webkit-background-clip:text; 
        -webkit-text-fill-color:transparent; 
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      .line1{
        display: flex;
        justify-content: center;
        align-items: center;
        .button{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 371px;
          height: 94px;
          margin-right: 80px;
          border-radius: 47px;
          background: #ebecf0;
          box-shadow:  12px 12px 24px #b3b3b6, -12px -6px 24px #ffffff;
          .text{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
          }
        }
        .arrow{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 94px;
          height: 94px;
          margin-right: 80px;
          border-radius: 15px;
          background: #ebecf0;
          box-shadow:  9px 9px 19px #b3b3b6, 
                      -9px -9px 19px #ffffff;
          .iconfont{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
          }
        }
        .close{
          position: relative;
          .bg{
            width: 116px;
            height: 61px;
            box-sizing: border-box;
            border: 6px solid rgba(255,255,255,0.16);
            border-radius: 31px;
            box-shadow: -30px -30px 60px 0 rgb(255,251,255), 30px 30px 60px 0 rgb(166, 171, 189);
          }
          .handle{
            position: absolute;
            top: -7px;
            left: -10px;
            width: 75px;
            height: 75px;
            box-sizing: border-box;
            border-radius: 37.5px;
            background-color: #fff;
            border: 1px solid #DEE1EB;
            box-shadow: 0 2px 2px 0 rgba(89,98,120,24);
          }
        }
      }
      .line2{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 52px;
        .input{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 371px;
          height: 94px;
          margin-right: 80px;
          border-radius: 47px;
          background-color: #EBECF0;
          box-shadow: inset -5px -5px 10px 0 rgb(255,251,255), inset 5px 5px 10px 0 rgb(166, 171, 189);
          .text{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
          }
        }
        .pressed{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 94px;
          height: 94px;
          margin-right: 80px;
          border-radius: 47px;
          background: linear-gradient(145deg, #fbfdff, #d4d4d8);
          box-shadow: -10px -10px 20px 0 rgb(255,251,255), 10px 10px 20px 0 rgb(166, 171, 189);
          .inner{
            width: 31px;
            height: 31px;
            border-radius: 31px;
            border: 5px solid #8A92A5;
          }
        }
        .unpressed{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 94px;
          height: 94px;
          border-radius: 47px;
          margin-right: 80px;
          box-sizing: border-box;
          border: 1px solid rgba(255,255,255,0.4);
          background: linear-gradient(145deg, #d4d4d8, #fbfdff);;
          box-shadow: inset -5px -5px 20px 0 rgb(255,251,255), inset 5px 5px 20px 0 rgb(166, 171, 189);
          .inner{
            width: 33px;
            height: 33px;
            border-radius: 33px;
            background-color: #8A92A5;
          }
        }
        .open{
          position: relative;
          .bg{
            width: 116px;
            height: 61px;
            box-sizing: border-box;
            border-radius: 31px;
            background-color: #1654F0;
            box-shadow: -30px -30px 60px 0 rgb(255,251,255), 30px 30px 60px 0 rgb(166, 171, 189);
          }
          .handle{
            position: absolute;
            top: -7px;
            right: -10px;
            width: 75px;
            height: 75px;
            box-sizing: border-box;
            border-radius: 37.5px;
            background-color: #fff;
            border: 1px solid #DEE1EB;
            box-shadow: 0 2px 2px 0 rgba(89,98,120,24);
          }
        }
      }
    }
  }
  .second-line{
    margin-top: 52px;
    display: flex;
    .left{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .top{
        display: flex;
        .share{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 80px;
          width: 245px;
          height: 94px;
          border-radius: 47px;
          box-shadow: -10px -10px 20px 0 rgb(255,251,255), 10px 10px 20px 0 rgb(166, 171, 189);
          .text{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
            margin-right: 10px;
          }
          .iconfont{
            color: #6D7587;
            font-size: 36px;
          }
        }
        .dropdown{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 371px;
          height: 94px;
          border-radius: 47px;
          box-shadow: -10px -10px 20px 0 rgb(255,251,255), 10px 10px 20px 0 rgb(166, 171, 189);
          .text{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
            margin-right: 30px;
          }
          .iconfont{
            color: #6D7587;
            font-size: 36px;
          }
        }
      }
      .middle{
        display: flex;
        margin-top: 52px;
        .label{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 80px;
          width: 245px;
          height: 94px;
          border-radius: 47px;
          box-shadow: -10px -10px 20px 0 rgb(255,251,255), 10px 10px 20px 0 rgb(166, 171, 189);
          .text{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
            margin-left: 10px;
          }
          .iconfont{
            color: #6D7587;
            font-size: 36px;
          }
        }
        .adduser{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 371px;
          height: 94px;
          border-radius: 47px;
          box-shadow: -10px -10px 20px 0 rgb(255,251,255), 10px 10px 20px 0 rgb(166, 171, 189);
          .text{
            font-size: 36px;
            font-weight: 200;
            color: #6D7587;
            margin-left: 10px;
          }
          .iconfont{
            color: #6D7587;
            font-size: 36px;
          }
        }
      }
      .bottom{
        margin-top: 52px;
        position: relative;
        .search{
          width: 687px;
          height: 94px;
          border-radius: 47px;
          box-sizing: border-box;
          border: 1px solid rgba(255,255,255,0.4);
          box-shadow: inset -5px -5px 20px 0 rgb(255,251,255), inset 5px 5px 20px 0 rgb(166, 171, 189);
          padding-left: 80px;
          font-size: 36px;
          color: #6D7587;
          &::placeholder{
            font-size: 36px;
            color: #6D7587;
          }
        }
        .iconfont{
          font-size: 36px;
          position: absolute;
          top: 27px;
          left: 30px;
          color: #6D7587;
        }
      }
    }
    .right{
      display: flex;
      margin-left: 80px;
      align-items: flex-end;
      .pillar1{
        height: 268px;
      }
      .pillar2{
        height: 350px;
      }
      .pillar3{
        height: 190px;
      }
      .pillar4{
        height: 388px;
      }
      .pillar5{
        height: 271px;
      }
      .pillar5{
        margin-right: 0 !important;
      }
      .pillar{
        position: relative;
        background: linear-gradient(145deg, #fbfdff, #d4d4d8);
        box-sizing: border-box;
        border: 1px solid rgba(255,255,255,0.4);
        box-shadow: inset -5px -5px 20px 0 rgb(255,251,255), inset 5px 5px 20px 0 rgb(166, 171, 189);
        width: 59px;
        margin-right: 42px;
        border-radius: 30px;
        .fill{
          border-radius: 30px;
          position: absolute;
          width: 59px;
          background-color: #1654F0;
          left: 0;
          bottom: 0;
        }
        .fill1{
          height: 165px;
        }
        .fill2{
          height: 283px;
        }
        .fill3{
          height: 92px;
        }
        .fill4{
          height: 323px;
        }
        .fill5{
          height: 188px;
        }
      }
    }
  }
}